<template>
	<div class="app-container">
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="商品编号：">
						<el-input v-model="listQuery.productId" class="input-width" placeholder="商品编号"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card class="operate-container" shadow="never">
			<i class="el-icon-tickets"></i>
			<span>数据列表</span>
			<el-button size="mini" class="btn-add" @click="loadAddCutPricePage()">添加砍价活动</el-button>
		</el-card>
		<div class="table-container">
			<el-table ref="newProductTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
				<el-table-column type="selection" width="60" align="center"></el-table-column>
				<el-table-column label="编号" width="120" align="center">
					<template slot-scope="scope">
						{{ scope.row.id }}
					</template>
				</el-table-column>
				<el-table-column label="商品编号" align="center">
					<template slot-scope="scope">
						{{ scope.row.productId }}
					</template>
				</el-table-column>
				<el-table-column label="商品名称" align="center">
					<template slot-scope="scope">
						{{ scope.row.productName }}
					</template>
				</el-table-column>
				<el-table-column label="总价" width="160" align="center">
					<template slot-scope="scope">
						{{ scope.row.countPrice }}
					</template>
				</el-table-column>
				<el-table-column label="总价" width="160" align="center">
					<template slot-scope="scope">
						{{ scope.row.randomPrice }}
					</template>
				</el-table-column>
				<el-table-column label="开始时间" width="200" align="center">
					<template slot-scope="scope">
						{{ scope.row.startDate }}
					</template>
				</el-table-column>
				<el-table-column label="结束时间" width="200" align="center">
					<template slot-scope="scope">
						{{ scope.row.endDate }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="120" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination-container">
			<el-pagination
				background
				layout="total, sizes,prev, pager, next,jumper"
				:page-size="listQuery.pageSize"
				:page-sizes="[5, 10, 15]"
				:current-page.sync="listQuery.pageNum"
				:total="total"
			></el-pagination>
		</div>
	</div>
</template>
<script>
import { fetchList, deleteCutPrice } from '@/api/cutprice.js';

const defaultListQuery = {
	pageNum: 1,
	pageSize: 5,
	productName: null,
	productId: null
};
export default {
	name: 'newProductList',
	data() {
		return {
			listQuery: Object.assign({}, defaultListQuery),
			list: null,
			total: null,
			listLoading: false,
			multipleSelection: [],
			operateType: null,
			selectDialogVisible: false,
			dialogData: {
				list: null,
				total: null,
				multipleSelection: [],
				listQuery: {
					keyword: null,
					pageNum: 1,
					pageSize: 5
				}
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		handleSearchList() {
			this.listQuery.pageNum = 1;
			this.getList();
		},
		handleDelete(index, row) {
			deleteCutPrice(row.id).then(response => {
				this.$message({
					type: 'success',
					message: '操作成功！'
				});
				this.getList();
			});
		},
		getList() {
			this.listLoading = true;
			fetchList(this.listQuery).then(response => {
				this.listLoading = false;
				this.list = response.data.list;
				this.total = response.data.total;
			});
		},
		loadAddCutPricePage(){
			this.$router.push({path:'/sms/addcutprice'})
		}
	}
};
</script>
<style></style>
